<template>
  <div class="jobcontent">
    <!--岗位详情-->
    <div class="page-container">
      <div class="container">
        <div class="row">
          <!--左边-->
          <div class="span8 page-content">
            <el-page-header @back="$router.back(-1)" :content="content.job_name"></el-page-header>
            <article class="type-post format-standard hentry clearfix">
              <div>
                <div class="show_unit fl ativity">
                  <a class="iconfont ic">&#xe661;</a>
                  <a class="tagname">岗位名称:</a>
                  {{content.job_name}}
                </div>
                <div class="show_unit fl ativity">
                  <a class="iconfont ic">&#xe616;</a>
                  <a class="tagname">类型:</a>
                  {{content.job_lable}}
                </div>
                <div class="show_unit fl ativity">
                  <a class="iconfont ic">&#xe623;</a>
                  <a class="tagname">薪资:</a>
                  {{content.job_salary}}
                </div>
                <div class="show_unit fl ativity">
                  <a class="iconfont ic">&#xe678;</a>
                  <a class="tagname">招聘人数:</a>
                  {{content.job_num}}
                </div>
                <div class="show_unit fl ativity">
                  <a class="iconfont ic">&#xe61a;</a>
                  <a class="tagname">投递方式:</a>
                  {{content.company_mail}}
                </div>
                <div style="clear:both"></div>
                <!--占位-->
              </div>
              <h3>岗位描述</h3>
              <pre v-html="content.job_content"></pre>
              <h3>公司信息</h3>
              <el-divider></el-divider>
              <router-link :to="'/companycontent/'+content.company_id">{{content.company_name}}</router-link>
              <el-divider></el-divider>
            </article>
            <div class="like-btn">
            </div>
            <comment/>
          </div>
          <!--右边-->
          <aside class="span4 page-sidebar">
            <carousel/>
            <job/>
          </aside>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import comment from '../../components/comment'
import carousel from '../../components/carousel'
import job from '../../components/job'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'jobcontent',
  components: { comment, carousel, job },
  data () {
    return {
      dialogFormVisible: false, // 弹框相关
      content: {},
      announcementlist: {}
    }
  },
  props: {
    id: {}
  },
  computed: {
    ...mapState({
      contentuserid: state => state.contentuserid,
      commentnum: state => state.commentnum
    })
  },
  methods: {
    ...mapActions(['setcontentid', 'setcontentinfo']),
    async getJobContent () {
      const data = {
        id: this.id
      }
      const result = await this.$axios.post('/web/getjobcontent', this.qs.stringify(data))
      if (result.data.state.type === 'SUCCESS') {
        this.content = result.data.data
        console.log('活动详情数据' + result.data.data)
        this.setcontentinfo({
          contentname: result.data.data.job_name,
          contentuserid: result.data.data.user_id
        })
      }
    }
  },
  watch: {
    id: {
      handler (newVal) {
        this.getJobContent()
        this.setcontentid(this.id)
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.setcontentid(this.id)
  }
}
</script>

<style scoped>
  .jobcontent {
    min-height: 200px;
  }

  .tagname {
    margin-right: 16px;
    font-size: 18px;
  }

  .show_unit {
    margin-bottom: 10px;
    height: 50px;
    line-height: 50px;
  }

  .ic {
    color: #409eff;
    margin-right: 30px;
    font-size: 30px;
  }
</style>
